<template>
  <v-card class="" flat>
    <v-row no-gutters justify="center" class="" style="flex-wrap:unset">
      <v-col cols="auto" class="pb-0">
        <v-avatar size="32">
          <v-img
            :src="cmt.avatar"
          ></v-img>
        </v-avatar>
      </v-col>
      <v-col>
        <v-col class="py-0">
          <span class="d-inline-block text-truncate text-body-2" style="max-width: 200px">
            {{cmt.username}}
            <span class="blue-grey--text text--lighten-3 text-body-2"
              >{{cmt.sign}}</span
            >
          </span>
        </v-col>
        <v-col class="py-0 text-body-2">{{cmt.content}}</v-col>
        <v-col class="py-0">
          <v-row
            align="center"
            class="blue-grey--text text--lighten-3 text-body-2"
          >
            <v-col class="pr-0">{{cmt.time}}</v-col>
            <v-col cols="auto" class="px-0">
              <v-btn tile text block depressed plain bottom>
                <v-icon small class="blue-grey--text text--lighten-3">
                  mdi-thumb-up-outline
                </v-icon>
              </v-btn>
            </v-col>
            <v-col cols="auto" @click="getSubCommentContain()" class="px-0">
              <v-btn
                tile
                text
                block
                depressed
                plain
                bottom
                class="blue-grey--text text--lighten-3 pl-0"
              >
                <v-icon small class="blue-grey--text text--lighten-3">
                  mdi-comment-outline </v-icon
                >回复
              </v-btn>
            </v-col>
          </v-row>
          <v-row v-if="sub_status" class="pb-2">
            <SubPublish
              :placeholder="'回复MilFun...'"
              :index="'comment-'+cmt.id"
              @getSubCommentContain="getSubCommentContain"
              :fstaus="true"
            />
          </v-row>
          <div v-for="(item,index) in cmt.subcomment_list" :key="index">
            <ReplyComment :rcmt="item" />
          </div>

        </v-col>

        <v-divider></v-divider>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import SubPublish from '~/components/mistalk/SubPublish'
import ReplyComment from '~/components/mistalk/ReplyComment'

export default {
  components: { SubPublish, ReplyComment },
  props: {
    id: String,
    cmt:Object
  },
  data: () => ({
    sub_status:false
  }),
  created() {

  },
  methods: {
    getSubCommentContain(){
      this.sub_status = this.sub_status ? false : true
    }
  },
}
</script>

<style></style>
